<h2>
  <em>Let's build a pipeline!</em> Ingest pipelines are an easy way to modify documents before they're indexed in Elasticsearch. They're composed of processors which can change your data in many ways. Create a pipeline below while cycling through your samples to see its effect on your data.
</h2>
<div class="main-panels">
  <div
    ng-hide="expandContext < 1"
    class="left-panel">
    <label>
      Processor Pipeline
      <a
        aria-label="A pipeline is a definition of a series of processors that are to be executed in the same order as they are declared."
        tooltip="A pipeline is a definition of a series of processors that are to be executed in the same order as they are declared."
        tooltip-append-to-body="true"
        target="_blank">
        <i aria-hidden="true" class="fa fa-question-circle"></i>
      </a>
    </label>
    <div class="pipeline">
      <ul
        class="pipeline-container"
        ng-show="pipeline.processors.length > 0">
        <li ng-repeat="processor in pipeline.processors track by processor.processorId">
          <processor-ui-container pipeline="pipeline" processor="processor"></processor-ui-container>
        </li>
      </ul>

      <div class="add-processor">
        <div
          class="form-group"
          ng-hide="pipeline.processors.length > 0">
          <label>
            Your pipeline is currently empty. Add a processor to get started!
          </label>
        </div>
        <div class="add-processor-dropdown">
          <select
            class="form-control"
            ng-options="processorType.title for processorType in processorTypes"
            ng-model="processorType"
            ng-disabled="pipeline.hasCompileError">
            <option value="">Select a Processor...</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="center-panel">
    <div class="buttons">
      <button
        aria-label="{{expandContext > 1 ? 'Expand Right Panel' : 'Collapse Left Panel'}}"
        tooltip="{{expandContext > 1 ? 'Expand Right Panel' : 'Collapse Left Panel'}}"
        ng-click="expandContext = expandContext - 1"
        ng-disabled="expandContext < 1"
        type="button"
        class="btn btn-primary btn-xs collapser">
        <i aria-hidden="true" class="fa fa-chevron-circle-left"></i>
      </button>
      <button
        aria-label="{{expandContext < 1 ? 'Expand Left Panel' : 'Collapse Right Panel'}}"
        tooltip="{{expandContext < 1 ? 'Expand Left Panel' : 'Collapse Right Panel'}}"
        ng-click="expandContext = expandContext + 1"
        ng-disabled="expandContext > 1"
        type="button"
        class="btn btn-primary btn-xs collapser">
        <i aria-hidden="true" class="fa fa-chevron-circle-right"></i>
      </button>
    </div>
  </div>
  <div
    ng-hide="expandContext > 1"
    class="right-panel">
    <pipeline-output pipeline="pipeline" samples="samples" sample="sample"></pipeline-output>
  </div>
</div>
